<%@ page import="com.apexedu.portal.constant.Constants" pageEncoding="utf-8" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title><%=Constants.ProjectInfo.PROJECT_NAME%>
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
        fieldset {
            border: 1px solid #ccc;
            margin: 20px auto;
        }

        legend {
            text-align: left;
        }

        table {
            width: 100%;
            line-height: 45px;
        }

        tr.custom {
            display: none;
        }

        select {
            width: 300px;
            height: 25px;
            padding: 0;
            border: 1px solid #ccc;
        }

        input {
            width: 300px;
            height: 25px;
            padding: 0;
            border: 1px solid #ccc;
        }

        .buttonDiv {
            height: 80px;
            line-height: 80px;
        }

        button {
            width: 100px;
            height: 25px;
            font-size: 12px;
        }
    </style>
</head>
<body>
<div id="main">
    <c:if test="${type=='edit'}">
        <jsp:include page="<%=Constants.ProjectInfo.HEAD_VIEW%>"/>
    </c:if>
    <c:if test="${type=='find'}">
        <jsp:include page="../shgh/headNologin.jsp"/>
    </c:if>
    <script src="${basePath}/resources/js/common/json2.js"></script>
    <script type="text/javascript">
        $(function () {
            //默认问题集合
            var htmlOption = $("select:first").html();
            //重置问题，不显示相同问题
            $("option:selected[value!=''][value!='-1']").each(function () {
                $("option[value='" + $(this).val() + "']").not(this).remove();
            })

            $("select").change(function () {
                var val = $(this).find("option:selected").val();
                if (val == '-1') {//显示自定义问题
                    $(this).parents("tr:first").next(".custom").show();
                    $(this).parents("tr:first").next().next("tr").find(":text").attr("disabled", "").val();
                } else {
                    $(this).parents("tr:first").next(".custom").hide().find(":text").val("");
                    var $answer = $(this).parents("tr:first").next().next("tr").find(":text");
                    $answer.val("");
                    if (val == '') {
                        $answer.attr("disabled", "disabled");
                    } else {
                        $answer.attr("disabled", "");
                    }
                }
                //重置其他问题，不显示相同问题
                $("select").not(this).each(function () {
                    var valthis = $(this).find("option:selected").val();
                    $(this).html(htmlOption).find("option[value='" + valthis + "']").attr("selected", "selected");
                });
                $("option:selected[value!=''][value!='-1']").each(function () {
                    $("option[value='" + $(this).val() + "']").not(this).remove();
                })
            });
        });

        /**
         * 提交
         */
        function doSumbit() {
            if ($("select[name='question'] option[value='']:selected").length > 1 || $(":text[name='answer'][value!='']").length < 2) {
                alert("至少设置两题！");
                return false;
            }
            var i = 1;
            var array = new Array();
            $("select:has(option[value!='']:selected)").each(function () {
                var item = new Object();
                var qid = $(this).val();
                if (qid != -1 && qid != '') {
                    item.qid = qid;
                } else if (qid == -1) {
                    item.custom = $(this).parents("tr:first").next("tr.custom").find(":text[name='custom']").val();
                }
                item.orderno = i++;
                item.answer = $(this).parents("tr:first").next().next("tr").find(":text[name='answer']").val();
                //item.answer = encodeURIComponent(item.answer);
                array.push(item);
            });

            $.post("${basePath}/s/uc/mh/pf/s", {data: JSON.stringify(array)}, function () {
                alert("提交成功！");
            });
        }

        /**
         *回到上一步
         */
        function doReturn() {
            window.location.href = "/s/mh/fp/uid";
        }

        /**
         *  校验密保问题，成功到下一步
         */
        function doNext() {
            var i = 1;
            var array = new Array();
            $("select:has(option[value!='']:selected)").each(function () {
                var item = new Object();
                var qid = $(this).val();
                if (qid != -1 && qid != '') {
                    item.qid = qid;
                } else if (qid == -1) {
                    item.custom = $(this).parents("tr:first").next("tr.custom").find(":text[name='custom']").val();
                }
                item.orderno = i++;
                item.answer = $(this).parents("tr:first").next().next("tr").find(":text[name='answer']").val();
                array.push(item);
            });
            $.post("${basePath}/s/mh/mq", {data: JSON.stringify(array)}, function (data) {
                if(data == 'false'){
                    alert("密保问题或答案不匹配，请重新输入！");
                    return false;
                }if(data == 'none'){
                    alert("密保问题及答案未设置，请联系管理员找回密码！");
                    return false;
                }else{
                    window.location.href = "${basePath}/s/mh/fp/pwd";
                }
            });
        }
    </script>
    <div id="content">
        <input type="hidden" name="userid" value="${userid}" />
        <div id="contentSub" style="min-height: 445px;height: auto;padding-bottom: 160px;">
            <fieldset>
                <c:if test="${type=='edit'}">
                    <legend>密码找回问题设置（至少设置两题）</legend>
                </c:if>
                <c:if test="${type=='find'}">
                    <legend>2、回答密码问题：</legend>
                </c:if>
                <table>
                    <tr>
                        <td width="35%" align="right">问题1：</td>
                        <td width="65%" align="left">
                            <select name="question">
                                <option value="">请选择</option>
                                <c:forEach items="${list}" var="question">
                                    <option value="${question.wid}"
                                            <c:if test="${pwdA1.qid==question.wid}">selected="selected" </c:if>>${question.title}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr class="custom"
                        <c:if test="${pwdA1.custom!=null && pwdA1.custom!=''}">style="display: table-row;" </c:if> >
                        <td align="right">请输入密保问题：</td>
                        <td align="left"><input type="text" name="custom" value="${pwdA1.custom}"/></td>
                    </tr>
                    <tr>
                        <td align="right">答案：</td>
                        <td align="left"><input type="text" name="answer" <c:if
                                test="${pwdA1==null || pwdA1.answer==''}"> disabled="disabled" </c:if>
                                                value="${pwdA1.answer}"/></td>
                    </tr>
                    <tr>
                        <td align="right">问题2：</td>
                        <td align="left">
                            <select name="question">
                                <option value="">请选择</option>
                                <c:forEach items="${list}" var="question">
                                    <option value="${question.wid}"
                                            <c:if test="${pwdA2.qid==question.wid}">selected="selected" </c:if>>${question.title}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr class="custom"
                        <c:if test="${pwdA2.custom!=null && pwdA2.custom!=''}">style="display: table-row;" </c:if> >
                        <td align="right">请输入密保问题：</td>
                        <td align="left"><input type="text" name="custom" value="${pwdA2.custom}"/></td>
                    </tr>
                    <tr>
                        <td align="right">答案：</td>
                        <td align="left"><input type="text" name="answer" <c:if
                                test="${pwdA2==null || pwdA2.answer==''}"> disabled="disabled" </c:if>
                                                value="${pwdA2.answer}"/></td>
                    </tr>
                    <tr>
                        <td align="right">问题3：</td>
                        <td align="left">
                            <select name="question">
                                <option value="">请选择</option>
                                <c:forEach items="${list}" var="question">
                                    <option value="${question.wid}"
                                            <c:if test="${pwdA3.qid==question.wid}">selected="selected" </c:if>>${question.title}</option>
                                </c:forEach>
                            </select>
                        </td>
                    </tr>
                    <tr class="custom"
                        <c:if test="${pwdA3.custom!=null && pwdA3.custom!=''}">style="display: table-row;" </c:if> >
                        <td align="right">请输入密保问题：</td>
                        <td align="left"><input type="text" name="custom" value="${pwdA3.custom}"/></td>
                    </tr>
                    <tr>
                        <td align="right">答案：</td>
                        <td align="left"><input type="text" name="answer" <c:if
                                test="${pwdA3==null || pwdA3.answer==''}"> disabled="disabled" </c:if>
                                                value="${pwdA3.answer}"/></td>
                    </tr>
                </table>
                <div class="buttonDiv">
                    <c:if test="${type=='edit'}">
                        <button type="button" onclick="doSumbit()">提交</button>
                        <button type="button">取消</button>
                    </c:if>
                    <c:if test="${type=='find'}">
                        <button type="button" onclick="doReturn()">上一步</button>
                        <button type="button" onclick="doNext()">下一步</button>
                    </c:if>
                </div>
            </fieldset>
        </div>
        <div id="contentBg"></div>
    </div>
    <jsp:include page="<%=Constants.ProjectInfo.FOOT_VIEW%>"/>
</div>
</body>
</html>
